<template>
    <view>
        <!-- 普通窗口 begin -->
        <view v-if="type == 'comm'" :class="'modal ' + (showClone ? 'show' : '')">
            <view class="dialog">
                <view class="bar bg-white justify-end">
                    <view class="content">{{ title }}</view>
                    <view class="action" @tap="bindHideModalTap">
                        <text class="icon-close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    <slot />
                </view>
            </view>
        </view>
        <!-- 普通窗口 end -->

        <!-- 底部窗口 begin -->
        <view v-if="type == 'bottom'" :class="'modal bottom-modal ' + (showClone ? 'show' : '')">
            <view class="dialog">
                <view class="bar bg-white">
                    <view class="action text-gray text-xl" @tap="bindHideModalTap">取消</view>
                    <view class="action text-green text-modal text-xl" @tap="bindComfirmTap">确定</view>
                </view>
                <view class="padding-xl">
                    <slot />
                </view>
            </view>
        </view>
        <!-- 底部窗口 end -->

        <!-- 对话窗口 begin -->
        <view v-if="type == 'dialog'" :class="'modal ' + (showClone ? 'show' : '')" @touchmove.stop.prevent="nomove">
            <view class="dialog modal-dialog">
                <view class="bar bg-white justify-end" v-if="title">
                    <view class="content">{{ title }}</view>
                </view>

                <view v-if="subtitle" class="subtitle" :style="'text-align:' + subtitleAlign">{{ subtitle }}</view>

                <view class="padding-xl slot-class" style="padding-top: 0">
                    <slot />
                </view>
                <view class="modal-bar">
                    <view class="" @tap="bindHideModalTap">{{ cancelText }}</view>
                    <view v-if="showConfirm" class="modal-bar-comfirm" @tap="bindComfirmTap">{{ confirmText }}</view>
                </view>
            </view>
        </view>
        <!-- 对话窗口 end -->

        <!-- 可能超长的对话窗口 begin -->
        <view v-if="type == 'longdialog'" :class="'modal ' + (showClone ? 'show' : '')">
            <view class="dialog modal-dialog">
                <view class="bar bg-white justify-end" v-if="title">
                    <view class="content">{{ title }}</view>
                </view>

                <view v-if="subtitle" class="subtitle" :style="'text-align:' + subtitleAlign">{{ subtitle }}</view>

                <view class="padding-xl slot-class" style="padding-top: 0">
                    <slot />
                </view>
                <view class="modal-bar">
                    <view class="" @tap="bindHideModalTap">{{ cancelText }}</view>
                    <view v-if="showConfirm" class="modal-bar-comfirm" @tap="bindComfirmTap">{{ confirmText }}</view>
                </view>
            </view>
        </view>
        <!-- 可能超长的对话窗口 end -->

        <!-- 图片窗口 begin -->
        <view v-if="type == 'image'" :class="'modal  ' + (showClone ? 'show' : '')">
            <view class="dialog">
                <view class="bg-img" :style="'height:' + height + 'rpx;'">
                    <image mode="aspectFill" :src="imgURL"></image>
                    <view class="bar justify-end text-white">
                        <view class="action" @tap="bindHideModalTap">
                            <text class="icon-close"></text>
                        </view>
                    </view>
                </view>
                <view class="bar bg-white" v-if="title">
                    <view class="action margin-0 flex-sub">{{ title }}</view>
                </view>
            </view>
        </view>
        <!-- 图片窗口 end -->
    </view>
</template>

<script>
// cmpts/public/modal/modal.js
export default {
    data() {
        return {
            showClone: ''
        };
    },
    options: {
        addGlobalClass: true,
        multipleSlots: true
    },
    externalClasses: ['slot-class'],
    /**
     * 组件的属性列表
     */
    props: {
        type: {
            // 类型 comm/bottom/dialog/image
            type: String,
            default: 'comm'
        },
        title: {
            type: String,
            default: '温馨提示'
        },
        subtitle: {
            type: String,
            default: ''
        },
        subtitleAlign: {
            type: String,
            default: 'center'
        },
        show: {
            type: Boolean,
            default: true
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        confirmText: {
            type: String,
            default: '确定'
        },
        showConfirm: {
            type: Boolean,
            default: true
        },
        imgURL: {
            type: String,
            default: ''
        },
        height: {
            type: Number,
            default: 600
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        bindHideModalTap: function (e) {
            this.setData({
                showClone: ''
            });
        },
        nomove: function () {},
        bindComfirmTap: function (e) {
            this.$emit('click', {
                detail: {}
            });
        }
    },
    created: function () {},
    watch: {
        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './modal_cmpt.css';
</style>
